<template>
<view class="main-bg">
	<u-icon name="reload" size="35rpx" color="#999" :class="['refreshData',refreshFlag?'animationRotate':'']" @click="handleRefresh"></u-icon>
	<u-toast ref="uToast" />
	<view class="alarm-body">
		<view class="mar-px20">
			<u-input
			    placeholder="请输入内容"
			    :border="true"
			    v-model="keywords"
			  ></u-input>
		</view>
		<view class="mar-px20">
			<input
			    placeholder="请点击选择日期区间"
				@focus="shows = true"
				style="height: 70rpx;padding: 20rpx;"
			    v-model="dateRange"
			></input>
			<u-calendar v-model="shows" :mode="mode" @change="confirm"></u-calendar>
		</view>
		<view class="mar-px20">
			<u-button type="primary" @click="searchClick">点击查询</u-button>
		</view>	
		<!-- tab -->
		<!-- 兼容安卓8以下 -->
		<!-- #ifdef APP-PLUS -->
			<template v-if="sysVersion < 8">
				<u-sticky offset-top="149" class="uSticky" bg-color="rgba(255,255,255,0)" :h5-nav-height='0'>
					<view class="tab-bar" :style="{'background-color':hasFixed?'#fff':'transparent'}">
					<view class="tabBar-box">
						<navTab :tabList="navArr"  @changeIndex="changeIndexTab"></navTab>
					</view>
					</view>
				</u-sticky>
			</template>
			<!-- 兼容安卓8以上 -->
			<template v-else>
				<view class="tab-bar" :style="{
					'position':'sticky',
					'top':'149rpx',
					'background-color':hasFixed?'#fff':'transparent',
				}">
					<view class="tabBar-box">
						<navTab :tabList="navArr"  @changeIndex="changeIndexTab"></navTab>
					</view>
				</view>
			</template>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="tab-bar" :style="{
			'background-color':hasFixed?'#fff':'transparent',
			'position':'sticky',
			'top':'149rpx'
		}">
			<view class="tabBar-box">
				<navTab :tabList="navArr"  @changeIndex="changeIndexTab"></navTab>
			</view>
		</view>
		<!-- #endif -->
		<!-- nav end -->
		<!-- list start -->
		<view class="list-items">
			<template v-if="listData.length > 0">
				<view class="alarm-item" v-for="(item,indx) in listData" :key="indx">
					<view class="t-alarm clearFix">
						<navigator :url="'/pages/computerRoomView/computerRoomView?roomId='+item.roomId+'&roomName='+item.roomName">
							<view class="title-alarm" :style="{
								'background-image':'url('+$store.state.baseImg+'/icon/lat.png)'
							}">{{item.roomName}}</view>
						</navigator>
					</view>
					<view class="down-alarm clearFix">
						<view class="l-down">
							<view :class="['room-icon']" :style="{
								'background-image':'url('+$classNameUrl(switchClass(item.deviceType))+')'
							}"></view>
						</view>
						<view class="r-down clearFix" @tap="routerLink(item)">
							<view :class="['r-title','text-level'+item.alarmLevel] ">{{deviceStatus(item.alarmLevel)}}</view>
							<view class="r-mid">{{item.alarmDesc}}</view>
							<view class="r-bottom">{{item.startTime}}</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="noData">暂无历史告警数据</view>
			</template>
		</view>
		<!-- list end -->
		<view class="page-next" v-if="total > 0">
			<onion-pagination style="justify-content: center;" :page="page" :pageSize="pageSize" :total="total" @changePage="updatePage"></onion-pagination>
		</view>
	</view>
</view>
</template>

<script>
	import navTab from '@/components/navTab/navTab.vue';
	import {alarmTabs,chooseAlarmLevel,throttle,rpxToPx,switchDeviceType} from "@/common/utils/index.js";
	export default {
		name: "alarmTab",
		props:{
			scrollTop:{
				type: Number,
				default:()=>0
			}
		},
		components: {
			navTab
		},
		data() {
			return {
				   keywords: "",
				  dateRange: null,
			   dateRangeObj: null,
					  shows: false,
					   mode: 'range',
				   hasFixed: false,
				refreshFlag: false,
					 enable: false,
					   page: 1,
				   pageSize: 10,
					  total: 10,
				 navCurrent: '0', //tab 栏的index
					 navArr: alarmTabs(),
				   listData: [],
				activeIndex: 0,
				  isLoading: false,
				 uniLoading: null,
				 sysVersion: getApp().globalData.sysEdition //系统版本
			}
		},
		watch:{
			scrollTop(newVal){
				if(newVal > 0){
					this.hasFixed = true
				}else{
					this.hasFixed = false
				}
			}
		},
		mounted() {
			// 初始化分类下list
			this.navArr.forEach((item)=>{
				item.attr = {
					 page: 1, //当前分类下的页码
					total: 10, //当前分类下的总数
					 size: 10,
					 list: [] //当前分类下的列表
				}
			});
			this.getData();
		},
		computed:{
			switchClass(){
				return function(val){
					const className = switchDeviceType(val);
					return className
				}
			},
			deviceStatus(){
				return function(val){
					const name = chooseAlarmLevel(val);
					return name;
				}
			}
		},
		methods: {
			searchClick(){//查询点击事件
				if(this.dateRangeObj){
					console.log("riqi",this.dateRangeObj,this.dateRange);
					this.getData(this.dateRangeObj);	
				}else{
					this.getData();
				}
			},
			confirm(e) {//日期区间选择事件
				this.dateRange =  e.startDate+" ~ "+e.endDate;
				this.dateRangeObj = e;
				console.log(this.dateRangeObj);
			},
			routerLink(val){
				const deviceClassName = switchDeviceType(val.deviceType)
				const obj = {
					suId:val.suId,
					deviceId:val.deviceId,
					deviceType:val.deviceType,
					name:val.deviceName,
					alarmLevel:val.alarmLevel
				}
				// 跳转详情
				this.routerToUrl(deviceClassName,obj)
			},
			routerToUrl(val,item) { //根据类名跳转不同的详情页面
				switch (val) {
					case "kong":
						uni.navigateTo({
							url: "/pages/airSwitch/airSwitch?item="+JSON.stringify(item),
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "pdg":
						uni.navigateTo({
							url: `/pages/powerDetail/powerDetail?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${item.deviceType}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "ups": case "ups-dx": case "ups-sx":
						uni.navigateTo({
							url: `/pages/upsDetail/upsDetail?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${item.deviceType}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "yg":
						uni.navigateTo({
							url: `/pages/smokeDetail/smokeDetail?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${item.deviceType}&alarmLevel=${item.alarmLevel}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "mj":
						uni.navigateTo({
							url: `/pages/doorDetail/doorDetail?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${item.deviceType}&alarmLevel=${item.alarmLevel}&name=${item.deviceName}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "xdc": //电池组
						uni.navigateTo({
							url: `/pages/cellDetail/cellDetail?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${item.deviceType}&alarmLevel=${item.alarmLevel}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "ls":
						uni.navigateTo({
							url: `/pages/louShuiDetail/louShuiDetail?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${item.deviceType}&alarmLevel=${item.alarmLevel}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "hw": case "hw-bgzj":
						uni.navigateTo({
							url: `/pages/redLineDetail/redLineDetail?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${item.deviceType}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "wsd":
						uni.navigateTo({
							url: `/pages/wsdDetail/wsdDetail?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${item.deviceType}&alarmLevel=${item.alarmLevel}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "jmkt": case "ptkt":
						uni.navigateTo({
							url: `/pages/airConditionerDetail/index?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${item.deviceType}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
				}
			},
			// 点击下拉刷新
			handleRefresh(){
				if(this.refreshFlag || this.isLoading == true) return; //防止二次点击
				uni.startPullDownRefresh();
				this.refreshData();
			},
			// 点击更新数据
			refreshData(){
				this.refreshFlag = true
				this.getData().then((res)=>{
					this.refreshFlag = false;
					uni.stopPullDownRefresh();
					this.$refs.uToast.show({
						title: '更新成功',
						type: 'success',
						duration:1500
					});
				}).catch(()=>{
					this.refreshFlag = false;
					uni.stopPullDownRefresh();
				})
			},
			updatePage(val){
				if(this.page == val) return;
				this.page =	this.navArr[this.navCurrent].attr.page = val;
				this.getData();
			},
			getData(dateRangeObj){
				this.isLoading = true;
				if(this.uniLoading){
					uni.hideLoading();
					this.uniLoading = null;
				}
				this.uniLoading = true;
				uni.showLoading({
				    title: '加载中',
					mask: false,
					success() {}
				});
				this.page =	this.navArr[this.navCurrent].attr.page;
				return new Promise((resolve,reject)=>{
					this.$http.httpRequest({
						url: this.$api.alarmList,
						methods: "get",
						data:{
						  queryParam: this.keywords,
						   alarmType: 1,
						   startTime: dateRangeObj? dateRangeObj.startDate:null,
							 endTime: dateRangeObj? dateRangeObj.endDate:null,
							  pageNo: this.page,
							pageSize: this.pageSize,
						  alarmLevel: this.navArr[this.navCurrent].alarmLevel
						},
						abort:true //可中断后续请求
					}).then((res)=>{
						console.log("history",res);
						this.isLoading = false
						uni.hideLoading();
						this.uniLoading = null;
						if(!res){
							reject(res)
							return uni.showToast({
								title:"服务器请求异常",
								icon:"none"
							})
						}
						uni.pageScrollTo({
							scrollTop: 0,
							duration:10
						})
						resolve(res)
						// 给tab栏赋值
						this.navArr.forEach((item)=>{
							res.data.alarmCount.forEach((its)=>{
								if(item.alarmLevel == its.alarmLevel){
									item['count'] = its.alarmSum;
								}
							})
							this.total = this.navArr[this.navCurrent].attr.total = res.data.alarmList.total;
							this.listData = this.navArr[this.navCurrent].attr.list = res.data.alarmList.list || [];
						})
						this.navArr[this.navCurrent].attr.total = res.data.alarmList.total
					}).catch((err)=>{
						this.isLoading = false
						this.uniLoading = null;
						reject(err)
						if(err.errMsg != "request:fail abort"){
							uni.hideLoading();
							uni.showToast({
								title:"服务器请求失败",
								icon:"none"
							})
						}
					})
				})
				return	
			},
			fixed(){
				this.hasFixed = true
			},
			unfixed(){
				this.hasFixed = false
			},
			changeIndexTab(val){
				this.navCurrent = val
				this.getData()
			},
			
		}
	}
</script>

<style scoped lang="scss">
.main-bg{background: #f0f0f7;}
.refreshData{
	width: 60rpx;
	height: 60rpx;
	color:#333;
	position:fixed;
	right:30rpx;
	bottom:180rpx;
	box-shadow: 0 0 5rpx #999;
	border-radius: 50%;
	background-color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 50;
}
.animationRotate{
	opacity: 0.5;
	animation: rotate 2s infinite linear;
}
@keyframes rotate{
	0%{transform: rotate(0deg);}
	50%{transform: rotate(180deg);}
	100%{transform: rotate(360deg);}
}
.noData{
	text-align: center;
	color: #999;
	padding-top: 60rpx;
}
.alarm-body{
	padding-top: 10rpx;
	color: $ky-main-color;
	position: relative;
	.tab-bar{ 
		width: 100%;
		transition: background-color .3s;
	}
}
.page-next{
	padding-bottom: 30rpx;
}
.list-items{
	margin: 30rpx;
}
.alarm-item{
	background: #fff;padding: 30rpx;border-radius: 30rpx;margin-bottom: 30rpx;
}
.title-alarm{
	// background: url($baseImg+"/icon/lat.png") left center no-repeat;
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;float: right;
	height: 32rpx;padding-left: 32rpx;
}
.l-down{
	width: 90rpx;
	float: left;text-align: center;
	margin-right: 20rpx;
}
.r-title{
	font-weight: bold;margin-bottom: 26rpx;letter-spacing: 1rpx;
}
.down-alarm{
	display: flex;
	justify-content: space-between;
}
.l-down .room-icon{
	flex-grow: 1;
	height: 100%;
	background-size: 60% auto;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.r-down{
	overflow: hidden;
	width: calc(100% - 110rpx);
}
.r-mid{
	line-height: 40rpx;
	margin-bottom: 26rpx;
}
.uSticky{
 /deep/	.u-sticky{
		transform: translateZ(0);
	}
}
</style>
